<template>
	<div class="h-[660px] overflow-y-auto flex flex-col w-full">
		<base-list-plus
			auto
			class="flex-1 max-md:px-3 md:px-[35px]"
			:loading="loading"
			:isFinish="isFinish"
			:isEmpty="isEmpty"
			:error="error"
			@load="search"
			@reload="search(true)">
			<div class="grid max-md:grid-cols-1 md:grid-cols-2 gap-4">
				<follow-item v-for="item in list" :key="item.id" :data="item">
					<!-- <template > -->
					<base-button
						v-if="isMe"
						size="tiny"
						:block="false"
						@click="handleFollowAction(item.followStatus, { id: item.userId })"
						:textT="getButtonText(item.followStatus)"
						class="ml-2 w-[167px] h-[40px] rounded-lg"></base-button>
					<!-- </template> -->
				</follow-item>
			</div>
		</base-list-plus>
	</div>
</template>
<script lang="ts" setup>
import { computed, watch } from 'vue'
import { BaseButton, BaseListPlus } from '@/components/base'
import { useFollowStore, useProfileStore } from '@/store'
import FollowItem from './follow-item.vue'
import { getMyFollowList, getOtherFollowList } from '@/api/user'
import { FollowStatus } from '@/enums'
import { getFollowAction, handleFollowAction } from './follow'
import { useRequest } from '@/hooks'
const profileStore = useProfileStore()
const followStore = useFollowStore()
const getButtonText = (followStatus: FollowStatus) => {
	const action = getFollowAction(followStatus)
	return action?.textT
}
const isMe = computed(() => profileStore.isMe(followStore.followShow?.userId))

watch(
	() => followStore.followShow?.userId,
	(val: any, oldVal: any) => {
		if (oldVal && val !== oldVal) {
			search(true)
		}
	}
)

const { run, loading, error, list, isFinish, isEmpty } = useRequest<any>(
	isMe.value ? getMyFollowList : getOtherFollowList,
	{
		pageSize: 20,
		paramsAlias: { page: 'pageNum' },
		resultAlias: { list: 'rows' }
	}
)

const search = (refresh = false) => {
	run(
		{
			id: profileStore.userInfo?.userId
		},
		{ refresh }
	)
}

search(true)
</script>
